<template>
	<view class="community-page">
		<view class="Classify-box">
			<view class="swiper-tab-box">
				<scroll-view class="scroll-tabs" scroll-x="true" :scroll-into-view="currentScrollView" scroll-with-animation>
					<block v-for="(item) in LoopClassifyData" :key="item.loop_id">
						<text :class="{'active': activeCategory == item.loop_id}" @click="selectClassify(item.loop_id)" 
							:id="'category-' + item.loop_id">
							{{item.loop_name}}
						</text>
					</block>
				</scroll-view>
				<view class="open-button" v-if="[3, 4].includes(identify)" @click="gotoPage">
					<uni-icons type="plusempty" size="30"></uni-icons>
				</view>
				<view class="open-button" @click="isAllClassifyPopup = true" v-else>
					<uni-icons type="list" size="30"></uni-icons>
				</view>
			</view>
			<view class="All-Classify-popup" v-if="isAllClassifyPopup" @click="isAllClassifyPopup = false">
				<view class="All-Classify-box">
					<view class="title">
						<text>全部分类</text>
						<uni-icons type="up" size="24" @click="isAllClassifyPopup = false"></uni-icons>
					</view>
					<block v-for="(item) in LoopClassifyData" :key="item.loop_id">
						<text :class="{'active-Tag': activeCategory == item.loop_id}" @click="selectClassify(item.loop_id)">
							{{item.loop_name}}
						</text>
					</block>
				</view>
			</view> 
		</view> 
		<view class="swiper-box">
			<swiper class="swiper-container" :current="activeCategoryIndex" @change="onSwiperChange">
					<swiper-item v-for="(item) in LoopClassifyData" :key="item.loop_id" style="overflow-y: auto !important;">
							<view class="container-box">
								<CommitCardVue :cardData="commitData" :loopId="activeCategory"
								 :loopImgCover="item.loop_img_cover" :userId="user_id"></CommitCardVue>
							</view>
					</swiper-item>
			</swiper>
		</view>
	</view>
	<bottomNavBar></bottomNavBar>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow, onLoad, onUnload } from '@dcloudio/uni-app';
	import { PostcommunityInfo } from '@/config/API/commit';
	import CommitCardVue from './components/CommitCard.vue';
	import bottomNavBar from '@/components/bottomNavBar.vue';
	import { getLoop } from '@/config/API/home.js';

	// 设置初始状态
	const activeCategory = ref(null); // 初始为空，表示没有选中
	const activeCategoryIndex = ref(0); // 用于控制swiper当前显示的索引
	const isAllClassifyPopup = ref(false);
	const currentScrollView = ref(''); // 当前滚动视图的目标 id
	// 环线数据
	const LoopClassifyData = ref([]);
	const PageDataStrat = ref(1)
	const PageSize = ref(10)
	const user_id = ref(-1);
	const commitData = ref([]); // 记录分页数据
	const identify =ref(uni.getStorageSync('userInfo').identify)

	onLoad(()=>{
		if(uni.getStorageSync('userInfo')){
			
			user_id.value = uni.getStorageSync('userInfo').id
		}else{
			user_id.value = -1
		}
	})
	
	onShow(async () => {
		const getLoopData = await getLoop();
		LoopClassifyData.value = getLoopData.data;
		console.log('社区获取所有环线: ', LoopClassifyData.value);

		// 从本地存储中读取上次选择的分类
		const lastCategory = uni.getStorageSync('activeCategory');

		if (lastCategory) {
			// 如果有上次选中的分类，恢复选择
			activeCategory.value = lastCategory;
			const index = LoopClassifyData.value.findIndex(item => item.loop_id === lastCategory);
			activeCategoryIndex.value = index;
			currentScrollView.value = `category-${lastCategory}`;
		} else if (LoopClassifyData.value.length > 0) {
			// 如果没有记录，默认选中第一个分类
			activeCategory.value = LoopClassifyData.value[0].loop_id;
			activeCategoryIndex.value = 0;
			currentScrollView.value = `category-${LoopClassifyData.value[0].loop_id}`;
		}

		// 加载该分类的数据
		fetchCommitData(activeCategory.value);
	});

	const fetchCommitData = async (id) => {
		// 设置请求参数
		const itemFrom = {
			page: PageDataStrat.value,
			size: PageSize.value,
			user_id: user_id.value,
			loopID: id
		};
		console.log('开始获取设计数据', itemFrom);
		try {
			// 发送请求
			const resData = await PostcommunityInfo(itemFrom)
			// 请求成功后更新数据
			if (resData && resData.data) {
				commitData.value = resData.data;
				console.log('社区数据获取成功：', commitData.value);
			} else {
				throw new Error('无效的响应数据');
			}
		} catch (err) {
			console.error('获取设计数据失败：', err);
		}
	};
	const selectClassify = (loop_id) => {
		activeCategory.value = loop_id;
		// 设置swiper的当前项
		const index = LoopClassifyData.value.findIndex(item => item.loop_id === loop_id);
		activeCategoryIndex.value = index;
		currentScrollView.value = `category-${loop_id}`; // 更新滚动目标
		isAllClassifyPopup.value = false; // 关闭弹窗
		uni.setStorageSync('activeCategory', loop_id); // 将选中的分类存储到本地
		fetchCommitData(activeCategory.value)
	};

	// swiper 滑动时更新选中的分类
	const onSwiperChange = (e) => {
		const newIndex = e.detail.current;
		activeCategoryIndex.value = newIndex;
		activeCategory.value = LoopClassifyData.value[newIndex].loop_id;
		currentScrollView.value = `category-${LoopClassifyData.value[newIndex].loop_id}`; 
		uni.setStorageSync('activeCategory', activeCategory.value); // 将选中的分类存储到本地
		// console.log('滑动了');
		fetchCommitData(activeCategory.value)
	};
	
	// 去发布界面 
	const gotoPage = () =>{
		uni.navigateTo({
			url:`/pages/community/publishPage`
		})
	}
	onUnload(() => {
		// 清除本地存储中的分类选择
		uni.removeStorageSync('activeCategory');
	});
</script>

<style scoped lang="scss">
	.community-page{
		width: 100%;
		min-height: 100vh;
		.Classify-box{
			position: sticky;
			top: 0;
			width: 100%;
			z-index: 1;
			background-color: #fff;
			.swiper-tab-box{
				width: 100%;
				height: 100rpx;
				// border-top: 2rpx solid #eeeeee;
				// box-shadow: 0px 0rpx 20rpx rgba(0, 0, 0, 0.1);
				padding-left: 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.scroll-tabs{
					width: 86%;
					height: 100%;
					display: flex;
					align-items: center;
					white-space: nowrap;
					text{
						width: fit-content;
						display: inline-flex;
						padding: 0 20rpx;
						height: calc(100% - 4rpx);
						align-items: center;
						font-size: 26rpx;
					}
					.active{
						font-size: 30rpx;
						color: #23a8f2;
						border-bottom: 4rpx solid #23a8f2;
					}
				}
				.open-button{
					width: 12%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					border-left: 2rpx solid #eeeeee;
					box-shadow: 4px 0rpx 20rpx rgba(0, 0, 0, 0.1);
				}
			}
			
			.All-Classify-popup{
				width: 100%;
				height: 100vh;
				position: absolute;
				top: 0rpx;
				z-index: 9;
				background-color: rgba(0, 0, 0, 0.3);
				.All-Classify-box{
					width: 100%;
					min-height: 200rpx;
					background-color: #fff;
					padding: 30rpx;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					gap: 40rpx;
					border-radius: 0 0 20rpx 20rpx;
					.title{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						text{
							font-size: 26rpx;
							border: none;
							font-weight: 400;
						}
					}
					text{
						padding: 8rpx 20rpx;
						border: 1rpx solid #e4e4e4;
						border-radius: 8rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						font-weight: 400;
					}
					.active-Tag{
						background-color: #eaf2ff;
						color: #2979FF;
						border: 1rpx solid #2979FF;
					}
				}
			}
		}
		.swiper-box{
			width: 100%;
			// min-height: 100vh;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			// background-color: #f5f6f7;
			.swiper-container{
				width: 100%;
				min-height: 90vh !important;
				padding-bottom: 100rpx;
				box-sizing: border-box;
				.container-box{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>